<template>
  <div id="app">
    <TabSwitch/>


    <p>App Component</p>
    <BComponent msg="来自App组件的数据" />

    <Model />

    <hr />

    <input type="text" v-model="val" />
    <button @click="handleReset">Reset</button>
    <button @click="getThis">getThis</button>
    <button v-on:click="doThat('hello', $event)">doThat</button>
    <p>{{val}}</p>

    <hr>

    <TreeView/>
  </div>
</template>

<script>
import BComponent from "./components/BComponent.vue";
import Model from "./components/Model.vue";
import TabSwitch from "./components/TabSwitch.vue";
import TreeView from "./components/TreeView/TreeView.vue";

export default {
  components: {
    BComponent,
    Model,
    TabSwitch,
    TreeView
  },
  computed: {},
  watch: {},
  data() {
    return {
      val: 1
    };
  },
  methods: {
    handleReset() {
      Object.assign(this.$data, this.$options.data())
    },
    getThis() {
      console.log(this)
      return this
    },
    doThat(a, b) {
      console.log(a, b.currentTarget)
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
